<template>
  <div class="order">
    <el-button
      type="primary"
      style="float: left; position: fixed; left: 0; bottom: 0"
      :disabled="current == 1 ? true : false"
      @click="back"
    >
      上一页
    </el-button>
    <el-button
      type="primary"
      style="float: right; position: fixed; right: 0; bottom: 0"
      :disabled="current == Math.ceil(this.total / this.limit) ? true : false || total == 0"
      @click="next"
    >
      下一页
    </el-button>
    <el-card>
      <el-table :data="orderList" style="width: 100%">
        <el-table-column prop="orderCode" label="订单编号" width="200"> </el-table-column>
        <el-table-column label="图标" width="120">
            <template slot-scope="scope">
                <el-avatar style="cursor: pointer;" @click.native="showInfo(scope.row.activity.activityId)" :src="scope.row.activity.activityUrl"></el-avatar>
            </template>
        </el-table-column>
        <el-table-column prop="activity.activityName" label="产品">
        </el-table-column>
        <el-table-column prop="activity.joinNumber" label="参与人数" width="100"> </el-table-column>
        <el-table-column prop="price" label="金额" width="100"></el-table-column>
        <el-table-column label="状态" width="100">
            <template slot-scope="scope">
                <el-tag v-if="scope.row.isSolve === 1" type="success">支付成功</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="gmtCreate" label="时间" width="160"> </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import order from "@/api/order";

export default {
  data() {
    return {
      orderList: [],
      orderListPage: [],
      current: 1, //页码
      limit: 4, //每页多少行
      total: 0, //总记录数,
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      order.getOrderByUserId(this.$store.state.user.userId).then((res) => {
        this.orderList = res.data.orderList;
        this.orderListPage = res.data.orderList;
        this.total = res.data.total;
        this.pageSlice()
      });
    },
    back() {
        this.current -= 1;
        this.pageSlice()
    },
    next() {
        this.current += 1;
        this.pageSlice()
    },
    sliceArr(arr) {
      let newObj = [];
      for (let i in arr) {
        newObj[i] = arr[i];
      }
      return newObj.slice(
        (this.current - 1) * this.limit,
        this.current * this.limit
      );
    },
    pageSlice() {
        let copyOrderList = this.orderListPage;
        this.orderList = this.sliceArr(copyOrderList);
    },
    showInfo(id) {
        this.$router.push({path: 'activityInfo', query: {id: id}})
    }
  },
};
</script>

<style scoped>
.order {
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 5%;
}
</style>